<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			.Container {width: 100%;}
			.tr_container {display: flex;justify-content: space-between;}
			.td_bgCter {background-color: red;height: 300px;width: 100%;}
			
			/* 线性渐变 */
			.gradient1 {
				/* Safari Mac OS 中的浏览器 */
				background: -webkit-linear-gradient(left top,red,blue);/* Safari 5.1 - 6.0 *//* Chrome 26.0 10.0 */
				background: -moz-linear-gradient(left top,red,blue);/* Firefox 3.6 - 15 */
				background: -o-linear-gradient(left top,red,blue);/* Opera 11.1 - 12.0 */
				background: linear-gradient(left top,red,blue);/* 标准的语法 *//* IE 10支持 */
			}
			.gradient2 {/* 由于兼容性问题 现能使用的反向仅为webkit：left top,left 另外的浏览器为：bottom right,right (上下变色不写方向)*/
				background: linear-gradient(to right,red,blue);
			}
			.gradient3 {
				background: linear-gradient(180deg,red,blue);/* 180deg表示渐变方向 */
			}
			.gradient4 {
				background: linear-gradient(0deg,red,blue);/* 180deg表示渐变方向 */
			}
			
			/* 多颜色节点 */
			.gradient4 {
				background: linear-gradient(red,blue,white);/* 180deg表示渐变方向 */
			}
			
			/* 透明度渐变 */
			.gradient5 {
				background: linear-gradient(160deg,rgba(255,0,0,0),rgba(255,0,0,1));/* 160deg表示渐变方向 */
			}
			
			/* 重复的线性渐变 */
			.gradient6 {
				background: linear-gradient(red,blue 20%,white 50%);/* 从百分之多少的地方开始渐变 */
			}
			.gradient7 {
				background: linear-gradient(red,blue 30%,white 70%);/* 从百分之多少的地方开始渐变 */
			}
			
			/* 径向渐变 */
			.gradient8 {
				background: -webkit-radial-gradient(red,green,blue);
				background: -o-radial-gradient(red,green,blue);
				background: -moz-radial-gradient(red,green,blue);
				background: radial-gradient(red,green,blue);
			}
			.gradient9 {
				background: radial-gradient(green 10%,red 30%,blue 60%);
			}
			.gradient10 {/* circle:圆形  ellipse:椭圆 */
				background: radial-gradient(circle,green 10%,red 30%,blue 60%);
			}
			
			.gradient11 {/*  */
				background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
				/* background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ */
				/* background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ */
				/* background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ */
			}
			.gradient12 {
				background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
			}
			
			/* 重复的径向渐变 */
			.gradient14 {
				background: repeating-radial-gradient(red,yellow 10%,green 15%);
			}
			.gradient15 {
				background: repeating-radial-gradient(circle,red,yellow 10%,green 15%);
			}
		</style>
	</head>
	<body>
		<div class="Container">
			<div class="tr_container">
				<div class="td_bgCter gradient1"></div>
				<div class="td_bgCter gradient2"></div>
				<div class="td_bgCter gradient3"></div>
			</div>
			<div class="tr_container">
				<div class="td_bgCter gradient4"></div>
				<div class="td_bgCter gradient6"></div>
				<div class="td_bgCter gradient7"></div>
			</div>
			<div class="tr_container">
				<div class="td_bgCter gradient5"></div>
				<div class="td_bgCter gradient8"></div>
				<div class="td_bgCter gradient9"></div>
			</div>
			<div class="tr_container">
				<div class="td_bgCter gradient10"></div>
				<div class="td_bgCter gradient11"></div>
				<div class="td_bgCter gradient12"></div>
			</div>
			<div class="tr_container">
				<div class="td_bgCter "></div>
				<div class="td_bgCter gradient14"></div>
				<div class="td_bgCter gradient15"></div>
			</div>
		</div>
	</body>
</html>